import { createApp, h } from "vue";

import App from "./App.vue";

import { createWebHashHistory, createRouter } from "vue-router";

import User from "./views/User.vue";
import Profile from "./views/Profile.vue";
import Posts from "./views/Posts.vue";
import Card from "./views/Card.vue";
import Header from "./views/Header.vue";
import Body from "./views/Body.vue";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/card",
      component: Card,
      children: [
        { path: "header", component: Header },
        { path: "body", component: Body },
      ],
    },
    {
      path: "/user",
      component: User,
      children: [
        {
          // /user/profile
          path: "profile",
          component: Profile,
        },
        {
          path: "posts/:id",
          component: Posts,
          name: "user-posts",
        },
      ],
    },
  ],
});

const app = createApp({ render: () => h(App) });

app.use(router);

app.mount("#app");
